<template>
    <transition name="fade">
        <aside v-if="menuStatus" class="left-wrapper">
            <div class="left-wrapper-fixed">
                <div class="user-wrapper flex flex_center flex_column">
                    <img src="https://portrait.gitee.com/uploads/avatars/user/2611/7833585_mmbabypinkme_1602465994.png!avatar200" />
                    <p class="user-name">mmbabypinkme</p>
                    <!-- <p class="user-email">mmbabypinkme.gitee.io/blog</p> -->
                </div>
                <div class="menu-wrapper">
                    <ul>
                        <li :class="{ 'li-active': active == 'webBlog' }" @click="changeMenu('webBlog', '/webBlog')">
                            <i class="iconfont icon-home"></i>
                            <p>Home</p>
                        </li>
                        <li :class="{ 'li-active': active == 'archives' }" @click="changeMenu('archives', '/archives')">
                            <i class="iconfont icon-Archives"></i>
                            <p>文章</p>
                        </li>
                        <li :class="{ 'li-active': active == 'tag' }" @click="changeMenu('tag', '/tag')">
                            <i class="iconfont icon-tag"></i>
                            <p>标签</p>
                        </li>
                        <li :class="{ 'li-active': active == 'edit' }" @click="changeMenu('edit', '/edit')">
                            <i class="iconfont el-icon-edit flex" style="font-size:16px;"></i>
                            <p>编辑文章</p>
                        </li>
                        <li class>
                            <i class="iconfont icon-git"></i>
                            <p>Github</p>
                        </li>
                    </ul>
                </div>
            </div>
        </aside>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            //当前选中菜单
            active: 'home',
            //有选中状态的路由名字
            menuItems: ['/webBlog', '/archives', '/tag', '/edit'],
        }
    },
    props: {
        menuStatus: {
            type: Boolean,
            default: true,
        },
    },
    created() {
        //解决刷新menu状态
        let pathName = this.$route.path.substring(1)
        this.active = pathName
    },
    mounted() {
        // 触发监听窗口滚动事件
        window.addEventListener('scroll', this.isScroll)
    },
    watch: {
        '$route.path'(newValue, oldValue) {
            if (this.menuItems.some((item) => item == newValue)) {
                let menuName = newValue.substring(1)
                this.active = menuName
            }
        },
    },
    methods: {
        // 路由跳转
        location(url) {
            this.$router.push({
                path: url,
            })
        },
        //单击菜单修改菜单样式
        changeMenu(active, url) {
            this.active = active
            this.location(url)
        },
        // 监听窗口滚动
        isScroll() {
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
            if (scrollTop == 0) {
                //滚动条为0
                this.navShadow = false
            } else {
                //滚动条不为0
                this.navShadow = true
            }
        },
    },
}
</script>

<style>
</style>
